<template>
    <div class="joint-element__wrap" id="jointJSElementWrap"></div>
</template>

<script setup>
// import * as joint from "jointjs";
// import "/node_modules/jointjs/dist/joint.css";
import { dia, shapes, layout } from "@joint/core"
import { options } from './option'
import { customRectangle } from './customRect'

defineOptions({
    name: "Element",
});

const graph = ref(null);
const paper = ref(null);
const rectGroupList = ref([]);
var namespace = shapes;

// 创建图形和页面
function createGraph() {
    graph.value = new dia.Graph({}, { cellNamespace: namespace });
    paper.value = new dia.Paper({
        el: document.getElementById("jointJSElementWrap"),
        model: graph.value,
        // width: 600,
        // height: 650,
        // gridSize: 20,
        drawGridSize: 20,
        drawGrid: {
            name: "dot",
            color: "#10AC84"
        },
        background: {
            color: "rgba(0, 255, 0, 0.3)",
        },
        cellViewNamespace: namespace,
        defaultLink: () => new shapes.standard.Link({
            attrs: {
                wrapper: {
                    cursor: 'default'
                }
            }
        }), // 默认链接配置
        linkPinning: false, // 禁止链接拖拽到空白区域
        defaultConnectionPoint: { name: 'boundary' },
    });

    // 自定义shapes.CustomRectangle
    const customRect = customRectangle()
    // console.log(shapes.standard, 4444);

    // 使用自定义形状shapes.CustomRectangle
    var rect3 = new shapes.standard.CustomRectangle();
    rect3.position(50, 340);
    rect3.resize(250, 180);
    const { height, width } = rect3.getBBox()
    // console.log(rect3.getBBox(),444);
    rect3.attr({
        body: {
            strokeWidth: 0,
            stroke: 'none',
            fill: '#3B3561',
            style: {
                cursor: 'default'
            }
        },
        label: {
            text: 'shapes.custom.CustomRectangle()',
            fill: '#fff',
            textWrap: {
                width: 180,
                height: 80,
                ellipsis: true
            },
            style: {
                cursor: 'pointer'
            }
        },
        description: {
            text: 'hello DESC',
            fill: 'tomato',
            style: {
                cursor: 'default'
            }
        },
        header: {
            rx: 6,
            ry: 6,
            style: { cursor: 'move' },
            fill: '#E0218A'
        },
        headerLabel: {
            text: '自定义Rect头部标题',
            fill: '#fff',
            fontSize: 18,
            fontWeight: 'bold',
            style: { cursor: 'move' }
        },
        rigthArrow: {
            style: {
                // transform: 'rotate(-90deg)'
            }
        }
    });
    rect3.addPorts([
        {
            group: 'in',
            // attrs: { label: { text: 'part 1'}},
            args: { x: '0%', y: '40%' }
        },
        {
            group: 'in',
            // attrs: { label: { text: 'part 2'}}
        },
        {
            group: 'out',
            // attrs: { label: { text: 'part 1'}},
            args: { x: '100%', y: '40%' }
        },
        {
            group: 'out',
            // attrs: { label: { text: 'part 2'}},
            // args: { x: '0%', y: '0%' }
        },
    ])
    rect3.addTo(graph.value);
}

// 创建矩形
function createRect() {
    for (let i = 0; i < options.length; i++) {
        const rect = new shapes.standard.Rectangle();
        rect.position(options[i].x, options[i].y);
        rect.resize(options[i].sizeX, options[i].sizeY);
        rect.attr({
            body: { ...options[i].body },
            label: { ...options[i].label },
        });
        rect.addTo(graph.value);
        rectGroupList.value.push(rect)
    }
    
}

// 创建连线
function createLink() {
    for (let i = 0; i < rectGroupList.value.length; i += 2) {
        const link = new shapes.standard.Link();
        link.source(rectGroupList.value[i]);
        link.target(rectGroupList.value[i+1]);
        link.addTo(graph.value);
    }
}

nextTick(() => {
    createGraph();
    createRect();
    createLink();
});
</script>

